<template>
  <div class="room-list">
    <a class="one-room" v-for="(oneRoom, index) of roomList.body" :key="index" @click="playRoom(oneRoom.roomId)">
      <img class="room-show" :src="oneRoom.roomPic" width="100%" height="100%">
      <img class="status-room" :src="oneRoom.hasUse ? playing : theFree" width="46" height="19">
    </a>
  </div>
</template>

<script>
  import playing from '../assets/picture/playing.png'
  import theFree from '../assets/picture/the-free.png'
  export default {
    name: 'listInfo',
    props: ['roomList'],
    data () {
      return {
        playing: playing,
        theFree: theFree
      }
    },
    methods: {
      playRoom (roomID) {
        this.$router.push({path: '/playing-room', query: {roomId: roomID}})
      }
    }
  }
</script>

<style scope lang="scss">
  .room-list{
    margin: 6px 6px;
    overflow: hidden;
    .one-room{
      position: relative;
      display: block;
      margin: 6px 6px;
      float: left;
      width: calc(50% - 12px);
      img{
        display: inherit;
        &.status-room{
          position: absolute;
          right: 0;
          top: 15px;
        }
      }
    }
  }
</style>
